﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <title>Title</title>

    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <style>
      .layui-body {
        overflow-y: scroll;
      }
      .layui-input-block .layui-unselect {
        width: 100%;
      }
      /* .layui-table-cell {
        height: 80px;
        line-height: 80px;
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .msg-pic {
        position: absolute;
        margin-left: -350px;
        left: 50%;
        z-index: 301;
        display: none;
        z-index: 999;
      }
      .msg-pic img {
        width: 700px;
      }
      .bigimg {
        display: inline;
      } */
    </style>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-space15">
          <form class="layui-form">
            <!--输入框内容盒子-->
            <div class="layui-col-md12">
              <p hidden id="type" name="type">1</p>

              <!--城市选择通用下拉框-->
              <div class="layui-col-md4">
                <label class="layui-form-label">证件情况：</label>
                <div class="layui-input-block">
                  <select name="card" id="card">
                    <option value="">正常</option>
                    <option value="1">一个月内过期</option>
                    <option value="2">二个月内过期</option>
                    <option value="3">三个月内过期</option>
                    <option value="4">四个月内过期</option>
                    <option value="5">五个月内过期</option>
                    <option value="6">六个月内过期</option>
                    <option value="0">未上传</option>
                  </select>
                </div>
              </div>

              <!-- 							  			<from class="layui-form">
				<div class="layui-col-md3">
	    	<label class="layui-form-label">溯源类型</label>
			<div class="layui-input-block">
				<select name="traceabilityType" lay-filter="aihao">
					<option value=""></option>

						<option value="1">个体溯源</option>

						<option value="2">批量溯源</option>

				</select>
				<div class="layui-unselect layui-form-select layui-form-selected"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="1" class="">个体溯源</dd><dd lay-value="2" class="">批量溯源</dd></dl></div>
			</div>
		</div>
		</from>	 -->
            </div>
            <div class="layui-col-md12" style="margin-top: 5px">
              <!--输入框-->
              <div class="layui-col-md4">
                <div class="layui-input-block">
                  <input type="hidden" id="productionCompanyId" name="productionCompanyId" />
                  <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                  <span style="color: red; overflow-x: hidden" id="companyName"></span>
                </div>
              </div>
            </div>

            <!--通用按钮盒子-->
            <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
              <!--通用table表格-->
              <div class="layui-btn-group demoTable">
                <button id="type1" class="layui-btn layui-btn-sm layui-btn-normal" type="button" data-type="card">
                  身份证
                </button>

                <button
                  id="type2"
                  class="layui-btn layui-btn-sm"
                  type="button"
                  data-type="health"
                  style="
                    background-color: white;
                    color: #1e9fff;
                    border-style: solid;
                    border-width: 1px;
                    border-color: #1e9fff;
                  "
                >
                  健康证
                </button>
                <button
                  id="type3"
                  class="layui-btn layui-btn-sm"
                  type="button"
                  data-type="test"
                  style="
                    background-color: white;
                    color: #1e9fff;
                    border-style: solid;
                    border-width: 1px;
                    border-color: #1e9fff;
                  "
                >
                  检验员资格证
                </button>
              </div>
              <div style="float: right" class="layui-btn-group paramBtn">
                <button data-type="reloadLabel" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                  查询
                </button>
                <button data-type="resetLabel" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                  重置
                </button>
              </div>
            </div>
          </form>

          <table
            class="layui-table"
            lay-data="{ url:'${ctx}/warning/warningPerson/findPersonPageNew', page:true,groups:5,id:'demo1' }"
            lay-filter="demo1"
          >
            <thead>
              <tr>
                <th lay-data="{field:'name'}">姓名</th>
                <th lay-data="{field:'eName',width:350}">企业名称</th>
                <th lay-data="{field:'dName'}">部门</th>
                <th lay-data="{field:'picList',toolbar:'#c'}">证件</th>
                <th lay-data="{field:'cDate',toolbar:'#d'}">证件有效期</th>
                <th lay-data="{field:'phone'}">联系电话</th>
              </tr>
            </thead>
            <div class="msg-pic" id="msg-pic" onclick="closeInspectionReport()"></div>
          </table>
        </div>
      </div>
    </div>
    <script type="text/html" id="c">
      {{#  if(d.picList !=null&&d.picList !=''){ }}

      		{{# for(var i=0;i<d.picList.length;i++){}}
      <div class="bigimg" id="pic{{d.picList[i].id}}">
      <img style="width: 80px;height: 80px;display:none;" src="${ctx}{{d.picList[i].url}}" class="layui-upload-img" onclick="showInspectionReport('pic'+{{d.picList[i].id}})">
      <img style="width: 80px;height: 80px;" src="${ctx}{{d.picList[i].turl}}" class="layui-upload-img" onclick="showInspectionReport('pic'+{{d.picList[i].id}})">
      </div>
      		{{#  } }}

        {{# } }}
    </script>
    <script type="text/html" id="d">
      {{# if(d.cDate !=null&&d.cDate !=''){ }} {{# if(d.guoqi == "0"){}}
      <img src="${ctx}/common/imgs/u4266.png" />
      {{d.cDate}} {{# } }} {{# if(d.guoqi == "1"){}}
      <img src="${ctx}/common/imgs/u4268.png" />
      {{d.cDate}} {{# } }} {{# } }}
    </script>
    <script id="createTime" type="text/html">
      {{# return layui.getDate(d.create_time, 'yyyy-MM-dd hh:mm:ss');}}
    </script>
  </body>
  <script>
    layui.use("table", function () {
      var loading = layer.msg("数据加载中...");
      var table = layui.table;
      table.render({
        done: function () {
          layer.close(loading);
        },
      });
      //监听filter为demo1的table中的工具条
      table.on("tool(demo1)", function (obj) {
        var data = obj.data;
        if (obj.event === "check") {
          window.location.href = "${ctx}/warning/warningEnterprise/enterpriseDetail?enterpriseId=" + obj.data.id;
        }
      });

      var $ = layui.$,
        active = {
          reloadLabel: function () {
            //条件查询
            var card = document.getElementById("card").value;
            var companyId = document.getElementById("productionCompanyId").value;
            var type = document.getElementById("type").innerHTML;
            table.reload("demo1", {
              where: {
                card: card,
                type: type,
                companyId: companyId,
              },
            });
          },
          resetLabel: function () {
            var type = document.getElementById("type").innerHTML;
            $("#productionCompanyId").val("");
            $("#type").val(type);
            $("#companyName").html("");
            table.reload("demo1", {
              where: {
                card: "",
                type: type,
                productionCompanyId: "",
                companyId: "",
              },
            });
          },
          card: function () {
            $("#type1").removeAttr("style");
            $("#type1").addClass("layui-btn-normal");
            $("#type2").removeClass("layui-btn-normal");
            $("#type3").removeClass("layui-btn-normal");
            $("#type2").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type3").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type").html("1");
            var card = document.getElementById("card").value;
            var companyId = document.getElementById("productionCompanyId").value;
            table.reload("demo1", {
              where: {
                card: card,
                type: "1",
                companyId: companyId,
              },
            });
          },
          health: function () {
            $("#type2").removeAttr("style");
            $("#type2").addClass("layui-btn-normal");
            $("#type1").removeClass("");
            $("#type3").removeClass("layui-btn-normal");
            $("#type1").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type3").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type").html("2");
            $("#tt").html("2");
            var card = document.getElementById("card").value;
            var companyId = document.getElementById("productionCompanyId").value;
            table.reload("demo1", {
              where: {
                card: card,
                type: "2",
                companyId: companyId,
              },
            });
          },
          test: function () {
            $("#type3").removeAttr("style");
            $("#type3").addClass("layui-btn-normal");
            $("#type1").removeClass("layui-btn-normal");
            $("#type2").removeClass("layui-btn-normal");
            $("#type1").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type2").attr(
              "style",
              "background-color:white;color:#1e9fff;border-style:solid;border-width:1px;border-color:#1e9fff;"
            );
            $("#type").html("3");
            var card = document.getElementById("card").value;
            var companyId = document.getElementById("productionCompanyId").value;
            table.reload("demo1", {
              where: {
                card: card,
                type: "3",
                companyId: companyId,
              },
            });
          },
        };

      $(".demoTable .layui-btn").on("click", function () {
        var type = $(this).data("type");
        active[type] ? active[type].call(this) : "";
      });
      //给按钮绑定active中的方法
      $(".paramBtn .layui-btn").on("click", function () {
        var type = $(this).data("type");
        //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
        active[type] ? active[type].call() : "";
      });

      /**
       * 点击生产企业按钮
       */
      $("#prodictionButton").on("click", function () {
        layer.open({
          type: 2,
          title: "生产企业",
          shadeClose: true,
          offset: "10px",
          shade: 0.8,
          area: ["50%", "100%"],
          content: "${ctx}/productionDetection/queryEnterpriseAll?companyIds=" + $("#productionCompanyId").val(), //iframe的url
        });
      });
    });
    var ins;
    function showInspectionReport(id) {
      var $ = layui.$;
      var imgSrc = document.getElementById(id).getElementsByTagName("img")[0].src;
      var img = "<img src='" + imgSrc + "' alt='' />";
      $("#msg-pic").css({ display: "block" });
      $("#msg-pic").css({ top: $(window).scrollTop() + "px" });
      $("#msg-pic").html(img);
    }
    function closeInspectionReport() {
      var $ = layui.$;
      $("#msg-pic").css({ display: "none" });
    }
  </script>
</html>
